<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            width: 500px;
            height: 600px;
            border: 1px solid red;
            display: flex;
            align-content:center;
            /* flex-direction:row-reverse; 规定主轴排列方向默认row从左到右 */
            /* flex-wrap:wrap; nowrap（默认不换行）  是否换行 */
           /*  justify-content:flex-start左浮 flex-end 右浮 center 居中显示 space-between 左右居两边，中间均匀分布 space-around 每个元素左右距离相等*/
            /* justify-content: space-around ;    */
            /* align-items: stretch; */
            justify-content: flex-start;
            
        }
        .item{
            width: 100px;
            height:80px;
            border: 1px solid red;
            order: 2;
        }
        .item2{
            height: 120px;
            order: 1;
        }
        .item3{
            height: 150px;
            order: 3;
        }
        .item4{
            height: 130px;
            order: 4;
        }
        .a{
            width: 100px;
            height: 100px;
            background: red;
        }
        .b{
            width: 100px;
            height: 100px;
            background: blue;
        }
        .c{
            width: 100px;
            height: 100px;
            background: green;
        }
        .d{
            width: 100px;
            height: 100px;
            background: orange;
        }
        .e{
            width: 100px;
            height: 100px;
            background-color: brown;
        }
        .f{
            width: 100px;
            height: 100px;
            background: darkcyan;
        }
        .g{
            width: 100px;
            height:100px;
            background: aquamarine;
        }
        .flex-box-a{
            width: 500px;
            height: 500px;
            background-color: blueviolet;
            display: flex;
            /* 规定主轴方向 一般都不写*/
            /* flex-direction: row-reverse; */
            /* 默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行0。(不换行会导致元素大小改变) */
            flex-wrap:wrap;
            /* flex-flow flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。*/
            justify-content: flex-end;
        }
        .flex-box-b{
            width: 500px;
            height: 500px;
            background: blueviolet;
            display: flex;
            flex-wrap: wrap;
            align-content:space-around;
        }
        .flex-box-c{
            width: 500px;
            height:500px;
            background: blueviolet;
            display: flex;
            justify-content:space-around;
            align-items: center;
        }
        .flex-box-d{
            width: 500px;
            height:500px;
            color: white;
            display:flex;
            justify-content:space-between;
        }
        .div1{
            min-width: 150px;
            height: 100%;
            background-color: blue;
        }
        .div2{
            width: 100%;
            height: 100%;
            background-color: red;
        }
    </style>
</head>
<body>
    <!-- Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。 -->
    <div class="box" >
          <div class="item">111</div>
          <div class="item item2">222</div>
          <div class="item item3">333</div>
          <div class="item item4">444</div>
    </div>
    <p>1号盒子</p>
    <div class="flex-box-a">
        <div class="a"></div>
        <div class="b"></div>
        <div class="c"></div>
        <!-- <div class="d"></div> -->
    </div>
    <p>2号盒子</p>
    <!-- align-content属性定义了多根轴线x轴的对齐方式。如果项目只有一根轴线，该属性不起作用。 -->
    <div class="flex-box-b">
        <div class="a"></div>
        <div class="b"></div>
        <div class="c"></div>
        <div class="d"></div>
        <div class="e"></div>
        <div class="f"></div>
    </div>
    <!-- align-items属性定义项目在交叉轴上如何对齐。 -->
    <p>3号盒子</p>
    <div class="flex-box-c">
        <div class="a" style="height:120px;"></div>
        <div class="b" style="height: 150px;"></div>
        <div class="c" style="height:110px;"></div>
        <div class="d" style="height: 140px;"></div>
    </div>
    <!-- 实现一边固定宽度一边宽度自适应布局  -->
    <p>4号盒子(一边固定宽度一边宽度自适应)</p>
    <div class="flex-box-d">
        <div class="div1">左边固定盒子</div>
        <div class="div2">右边自适应盒子</div>
    </div>
</body>
</html>